const routesData = require("data/uri.json");

export default {
	name: "create-url",
	data() {
		const RouteName = (rule, value, callback) => {
			if (this.routeInfos.length > 1 && !value) {
				callback(new Error());
			}
			callback();
		};
		return {
			title: "路由树",
			currentNode: {
				list: []
			},
			columns: [
				{label: "编号", prop: "id", kind: "input", width: 120, disabled: true},
				{label: "页面标题", prop: "title", kind: "input", width: 160, disabled: true},
				{label: "根级路由", prop: "root", kind: "input", width: 200, disabled: true},
				{label: "父级路由", prop: "parent", kind: "input", width: 200, disabled: true},
				{label: "名称", prop: "routeName", kind: "input", width: 200, disabled: false},
				{label: "路由路径", prop: "routePath", kind: "input", disabled: false}
			],
			rules: {
				routeName: [
					{validator: RouteName, message: "请输入路由名称", trigger: "blur"},
					{validator: RouteName, message: "请输入路由名称", trigger: "change"}
				],
				routePath: [
					{required: true, message: "请输入路由路径", trigger: "blur"},
					{required: true, message: "请输入路由路径", trigger: "change"}
				]
			}
		};
	},
	created() {
		this.currentNode.list = this.routeInfos;
	},
	computed: {
		routeData() {
			return this.develop.loadRoutes();
		},
		routeInfos() {
			let routes = [];
			if (this.currentNode.list && this.currentNode.list.length === 0) {
				const childRoute = this.routeData[1].children[0];
				if (this.menuHandler.hasChildren(childRoute)) {
					routes = routes.concat(childRoute.children);
				} else {
					routes.push(childRoute);
				}
			} else {//正常点击node显示信息
				routes = routes.concat(this.currentNode.list);
			}
			this.currentNode.list = routes;
			return routes;
		}
	},
	methods: {
		editNode(node, data) {
			if (Number(node.level) === 1) {
				return;
			}
			if (Number(node.level) === 3) {
				data = node.parent.data;
			}
			this.currentNode.list = [];
			if (this.menuHandler.hasChildren(data)) {
				this.currentNode.list = this.currentNode.list.concat(data.children);
			} else {
				this.currentNode.list.push(data);
			}
		},
		createUrl(prop, row, rowIndex) {
			if (prop === "routeName" && this.validateRepeatName(row.routeName, rowIndex)) {
				row.routePath = "/" + row.root + "/" + row.parent + "/" + row.routeName;
			}
		},
		changeUrl(prop, row, rowIndex) {
			if (prop === "routeName" && !row.routeName) {
				row.routePath = "";
			}
		},
		validateRepeatName(name, rowIndex) {
			if (this.routeInfos.length <= 1) {
				return true;
			}
			if (!name) {
				this.routeInfos[rowIndex].routePath = "";
				return false;
			}
			for (let i = 0; i < this.routeInfos.length; i++) {
				let routeInfo = this.routeInfos[i];
				if (routeInfo.routeName === name && Number(i) !== Number(rowIndex)) {
					this.message.error("当前名称与第 " + (i + 1) + " 行名称重复！");
					this.routeInfos[rowIndex].routePath = "";
					return false;
				}
			}
			return true;
		},
		validateRepeat() {
			if (this.routeInfos.length <= 1) {
				return true;
			}
			for (let i = 1; i < this.routeInfos.length; i++) {
				let routeInfo = this.routeInfos[i];
				for (let j = 0; j < i; j++) {
					let preRouteInfo = this.routeInfos[j];
					if (routeInfo.routeName && preRouteInfo.routeName && routeInfo.routeName === preRouteInfo.routeName) {
						this.message.error("第 " + (i + 1) + " 行名称与第 " + (j + 1) + " 行名称重复！");
						this.routeInfos[i].routePath = "";
						return false;
					}
				}
			}
			return true;
		},
		handleSave() {
			if (!this.validateRepeat()) {
				return;
			}
			let data = this.collectData();
			let routes = this.objectUtils.deepClone(Object.assign({}, routesData), data);
			this.downLoadData(routes);
		},
		collectData() {
			let data = {}, current = {}, parent = {};
			let rootKey = "", parentKey = "";
			this.routeInfos.forEach(route => {
				rootKey = route.root;
				parentKey = route.parent ? route.parent : "";
				current[route.routeName] = route.routePath;
			});
			if (parentKey) {
				parent[parentKey] = current;
				data[rootKey] = parent;
			} else {
				data[rootKey] = current;
			}
			return data;
		},
		downLoadData(routes) {
			this.resourceUtils.download(routes, "uri.json");
		},
		appendRow(rowIndex) {
			let rootId = this.getRootId();
			let index = rowIndex % (this.routeInfos.length);
			this.routeInfos.push({
				id: rootId + (this.routeInfos.length + 1),
				title: this.routeInfos[index].title,
				root: this.routeInfos[index].root,
				parent: this.routeInfos[index].parent,
				routeName: "",
				routePath: ""
			});
		},
		removeRow(rowIndex) {
			if (rowIndex < this.currentNode.length) {
				return;
			}
			this.routeInfos.splice(rowIndex, 1);
			if (this.routeInfos && this.routeInfos.length > 0) {
				let rootId = this.getRootId();
				for (let i = 0; i < this.routeInfos.length; i++) {
					this.routeInfos[i].id = rootId + (i + 1);
				}
			}
		},
		getRootId() {
			if (this.routeInfos && this.routeInfos.length > 0) {
				let currentId = this.routeInfos[0].id.toString();
				return currentId.substring(0, currentId.length - 1);
			}
		},
		showError() {
			let errorElement = this.$refs.urlFormTable.$el.querySelector(".is-error");
			if (errorElement) {
				errorElement.style.marginBottom = "20px";
			}
		},
		clearError() {
			let successElement = this.$refs.urlFormTable.$el.querySelector(".is-success");
			if (successElement) {
				successElement.style.marginBottom = "0px";
			}
		}
	}
};
